<template>
  <div class="x-action-bars">
    <div class="action-bars">
      <el-tooltip class="handle_icon" effect="light" content="置顶" placement="left">
        <div class="handle_icon" @click="stickTab">
          <i class="el-icon-upload2"></i>
        </div>
      </el-tooltip>
      <el-tooltip class="handle_icon" effect="light" content="反馈" placement="left">
        <div class="handle_icon" @click="dialogTab">
          <i class="el-icon-question"></i>
        </div>
      </el-tooltip>
      <el-tooltip class="handle_icon" effect="light" content="教程" placement="left">
        <div class="handle_icon" @click="$router.push('/admin/Tutorial/index')">
          <i class="el-icon-monitor"></i>
        </div>
      </el-tooltip>
    </div>
    <el-dialog title="反馈" class="action-dialog" :visible.sync="dialogVisible" width="50%" top="10vh">
      <div class="bars-dialog">
        <el-alert title="聆听，为您体验，用心改变" type="success" description="我们真诚地邀请您参与我们系统的持续改善工作，您可以将您的产品建议、功能缺陷、文档等其他问题，反馈给我们。希望您能和我们分享在您使用过程中的真实想法和感受，帮助我们一起完善系统，优化使用体验。" :closable="false" show-icon>
        </el-alert>
        <el-form class="bars_el-form" :model="ruleForm">
          <el-form-item label="问题类型">
            <el-radio-group v-model="ruleForm.type">
              <el-radio :label="item.key" v-for="(item, index) in workOrderList" :key="index">{{item.name}}</el-radio>
            </el-radio-group>
            <div class="form-intro">请选择提交的类型</div>
          </el-form-item>
          <el-form-item label="问题描述">
            <el-input type="textarea" v-model="ruleForm.intro"></el-input>
            <div class="form-intro">将您的产品建议、功能缺陷、文档等其他问题，反馈给我们。希望您能和我们分享在您使用过程中的真实想法和感受，优化使用体验。</div>
          </el-form-item>
          <el-form-item label="图片">
            <x-tutorrial-upload class="form-image-tup" v-model="ruleForm.images" :limit="5"></x-tutorrial-upload>
            <div class="form-intro">选择文件允许的文件类型：png，jpg，gif，jpeg，pdf，doc且不超过5M</div>
            <el-upload :on-change="onChange" :accept="acceptStr" :action="$ala.host+'Api/StorageFile/upload'" :before-upload="beforeAvatarUpload">
              <div class="form-update">
                <i class="el-icon-paperclip form-update-text" style="font-size: 16px"></i>
                <span class="form-update-text">上传附件</span>

                <span slot="tip">（仅允许上传word、pdf文件）</span>
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="dialog-footer_hint">{{ruleForm.url}}</div>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">提交反馈</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import api from 'api'
  import ala from 'ala'
  export default {
    props: {
      widget: {}
    },
    data () {
      return {
        dialogVisible: false,
        ruleForm: {
          resource: 1,
          type: 1,
          images: [],
          attachment: ''
        },
        acceptStr: '.doc,.docx,.ppt,.pptx,.xls,.xlsx',
        baseUrl: ala.host,
        workOrderList: [], // 工单分类
        fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]
      }
    },
    methods: {
      async init () {
        this.workOrderList = await api.relationGet('WorkOrderClassRelation') || []
        if (this.workOrderList.length !== 0) {
          this.ruleForm.type = this.workOrderList[0].key
        }
        this.ruleForm.url = window.location.pathname
      },
      stickTab () {
        document.body.scrollTop = 0
      },
      dialogTab () {
        this.init()
        this.dialogVisible = true
      },
      handleAvatarSuccess () {

      },
      beforeAvatarUpload (file) {
        // 允许上传文件
        let typeList = ['.pdf', '.doc', '.xls']
        let fileItem = typeList.find(r => file.name.indexOf(r) > -1)
        if (!fileItem) {
          return this.$message.warning('仅允许上传word、pdf、xls文件')
        }
      },
      async save () {
        let findItem = this.workOrderList.find(r => r.key === this.ruleForm.type)
        if (!this.ruleForm.intro) {
          return this.$message.warning('请输入问题描述')
        }
        let user = ala.user()
        let para = {
          name: `[${findItem.name}]${this.$route.meta.title}`,
          description: this.ruleForm.intro,
          images: this.ruleForm.images,
          attachment: this.ruleForm.attachment,
          userId: ala.user().id,
          tenant: api.site(),
          userName: `${user.name}(${user.userName})`,
          url: this.$route.path,
          user: ala.user(),
          avator: 'fsdffsfsadf'
        }
        let result = await ala.diyHttpPost('Api/WorkOrder/QuerySave', para)
        if (result) {
          this.$message.success('工单已提交，请留意信息')
          this.dialogVisible = false
        }
      },
      onChange (file) {
        if (file.response) {
          if (file.response.status === 1) {
            this.ruleForm.attachment = file.response.result.path
          } else {
            this.$message.error(file.response.message)
          }
        }
      }
    }
  }
</script>
<style lang="scss">
  @import "./var.scss";
</style>